import React, { useState, useEffect, useCallback } from 'react'
import { SideBar, Grid, Image, Ellipsis } from 'antd-mobile'
import { useNavigate, useParams,Outlet,useLocation } from 'react-router-dom'
import request, { baseUrl } from '../utils/request'


function Discover() {
    const location = useLocation();
    const [tabs, setTabs] = useState([])
    const path = location.pathname.split('/')
    const currentCategory = path[path.length-1];

    // 获取动态路由id
    const navigate = useNavigate()
    const [activeKey, setActiveKey] = useState(currentCategory)


    const changeKey = useCallback((key) => {
        setActiveKey(key);

        // ajax请求
        // getData()

        // 切换路由
        navigate(key)
    }, [])


    // 获取分类数据
    useEffect(() => {
        request('/category').then(({ data }) => {
            const tabs = data.data.result
            setTabs(tabs)

            setActiveKey(tabs[0]._id)


        })
    }, [])


    return <div style={{ margin: '-1em', height: '100%' }}>
        <SideBar activeKey={activeKey} onChange={changeKey}>
            {tabs.map(item => (
                <SideBar.Item key={item.name || item._id} title={item.text} />
            ))}
        </SideBar>
        <div className='goodslist'>
            {/* Outlet用于显示嵌套路由组件 */}
            <Outlet/>
        </div>


    </div>
}

export default Discover;